WebSocket হলো একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে একটানা এবং রিয়েল-টাইম যোগাযোগ স্থাপন করে। এটি HTTP প্রোটোকলের তুলনায় বেশি কার্যকরী, কারণ একবার কানেকশন স্থাপিত হলে তা স্থায়ী থাকে এবং বারবার নতুন কানেকশন তৈরি করার প্রয়োজন পড়ে না। এই কারণে, WebSocket ব্যবহার করে আপনি সহজেই রিয়েল-টাইম ডেটা সেন্টার থেকে ক্লায়েন্ট অ্যাপ্লিকেশনে পাঠাতে পারেন এবং ব্রাউজারে সরাসরি আপডেট দেখতে পারেন।

এখানে, আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে WebSocket ব্যবহার করে Highcharts চার্টে রিয়েল-টাইম ডেটা আপডেট করা যায়।

Step 1: WebSocket ইনস্টল করা

আপনি যদি Angular অ্যাপ্লিকেশনে WebSocket ব্যবহার করতে চান, তবে প্রথমে ngx-websocket বা rxjs/webSocket ব্যবহার করতে পারেন। এই টিউটোরিয়ালে আমরা Angular এর বিল্ট-ইন rxjs/webSocket ব্যবহার করব।

rxjs/webSocket ইনস্টল করুন:

npm install rxjs --save

এটি rxjs লাইব্রেরি ইনস্টল করবে, যা Angular অ্যাপ্লিকেশনে WebSocket ব্যবহারের জন্য প্রয়োজনীয় ফাংশন সরবরাহ করে।

Step 2: WebSocket সেবা তৈরি করা

আমরা একটি সার্ভিস তৈরি করব যা WebSocket কানেকশন পরিচালনা করবে এবং ডেটা পাবলিশ/সাবস্ক্রাইব করবে।

1. WebSocket সেবা তৈরি করুন:

ng generate service websocket

এটি websocket.service.ts নামে একটি নতুন সার্ভিস তৈরি করবে।

2. websocket.service.ts ফাইলে WebSocket কানেকশন তৈরি করুন:

import { Injectable } from '@angular/core';
import { webSocket } from 'rxjs/webSocket';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {
  private socket: any;
  private socketUrl: string = 'ws://localhost:8080';  // WebSocket সার্ভারের URL

  constructor() { }

  // WebSocket কানেকশন শুরু করা
  connect(): Observable<any> {
    this.socket = webSocket(this.socketUrl);
    return this.socket.asObservable();
  }

  // WebSocket সার্ভারে ডেটা পাঠানো
  sendMessage(message: any): void {
    this.socket.next(message);
  }

  // WebSocket কানেকশন বন্ধ করা
  close(): void {
    this.socket.complete();
  }
}

• connect(): WebSocket সার্ভারে কানেক্ট করবে এবং ডেটা রিসিভ করার জন্য একটি Observable রিটার্ন করবে।
• sendMessage(): সার্ভারে একটি মেসেজ পাঠানোর জন্য।
• close(): WebSocket কানেকশন বন্ধ করবে।

Step 3: Angular কম্পোনেন্টে WebSocket সেবা ব্যবহার করা

এখন আমরা এই সেবাটি ব্যবহার করব আমাদের কম্পোনেন্টে এবং রিয়েল-টাইম ডেটা গ্রহণ করে Highcharts চার্টে আপডেট করব।

1. app.component.ts ফাইলে WebSocket সেবা এবং Highcharts চার্ট কনফিগারেশন যোগ করুন:

import { Component, OnInit, OnDestroy } from '@angular/core';
import * as Highcharts from 'highcharts';
import { WebsocketService } from './websocket.service';  // WebSocket সেবা ইমপোর্ট করা

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  Highcharts = Highcharts;
  chartOptions: any;
  chartData: any[] = [];
  private socketSubscription: any;

  constructor(private websocketService: WebsocketService) { }

  ngOnInit() {
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'রিয়েল-টাইম ডেটা আপডেট'
      },
      series: [{
        name: 'Stock Price',
        data: this.chartData
      }]
    };

    // WebSocket কানেক্ট করা এবং ডেটা সাবস্ক্রাইব করা
    this.socketSubscription = this.websocketService.connect().subscribe((data: any) => {
      this.updateChart(data);
    });
  }

  // Highcharts চার্ট আপডেট করা
  updateChart(newData: any) {
    // নতুন ডেটা সংগ্রহ করা এবং চার্টে যুক্ত করা
    this.chartData.push([newData.timestamp, newData.value]);  // নতুন ডেটা যুক্ত করা
    if (this.chartData.length > 50) {
      this.chartData.shift();  // অতিরিক্ত ডেটা মুছে ফেলা (এখানে ৫০টি পয়েন্ট সীমিত)
    }

    // Highcharts এর মাধ্যমে ডেটা আপডেট করা
    Highcharts.charts[0].series[0].setData(this.chartData);
  }

  ngOnDestroy() {
    // কম্পোনেন্ট ধ্বংস হলে WebSocket সাবস্ক্রিপশন বন্ধ করা
    if (this.socketSubscription) {
      this.socketSubscription.unsubscribe();
    }
  }
}

2. app.component.html ফাইলে Highcharts কম্পোনেন্ট যোগ করুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

ব্যাখ্যা:

1. WebSocket কানেকশন: ngOnInit মেথডে আমরা websocketService.connect() কল করে WebSocket কানেকশন শুরু করেছি। এর মাধ্যমে আমরা WebSocket সার্ভার থেকে আসা ডেটা পাবো।
2. ডেটা আপডেট করা: যখন নতুন ডেটা আসে (যেমন timestamp এবং value), তখন আমরা সেই ডেটা chartData অ্যারে তে যোগ করি এবং তারপর Highcharts.charts[0].series[0].setData() ব্যবহার করে চার্ট আপডেট করি।
3. ngOnDestroy: যখন কম্পোনেন্টটি ধ্বংস হয় (যেমন ইউজার পেজ থেকে চলে যায়), তখন WebSocket কানেকশন বন্ধ করতে ngOnDestroy মেথডে unsubscribe() ব্যবহার করা হয়।

Step 4: WebSocket সার্ভার সেটআপ

WebSocket সার্ভার থেকে ডেটা পাঠানোর জন্য, আপনি একটি সাধারণ Node.js WebSocket সার্ভার তৈরি করতে পারেন। এখানে একটি ছোট Node.js WebSocket সার্ভারের উদাহরণ দেওয়া হলো:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  setInterval(() => {
    const data = {
      timestamp: Date.now(),
      value: Math.random() * 100  // ডামি ডেটা
    };
    ws.send(JSON.stringify(data));  // WebSocket মাধ্যমে ডেটা পাঠানো
  }, 2000);  // প্রতি ২ সেকেন্ডে ডেটা পাঠানো
});

এই সার্ভারটি প্রতি ২ সেকেন্ডে একটি নতুন র্যান্ডম value সহ টাইমস্ট্যাম্প পাঠাবে।

সারাংশ

WebSocket ব্যবহার করে Angular অ্যাপ্লিকেশনে রিয়েল-টাইম ডেটা আপডেট করা একটি শক্তিশালী পদ্ধতি। আমরা Angular এর rxjs/webSocket এবং Highcharts ব্যবহার করে একটি রিয়েল-টাইম ডেটা আপডেটের সিস্টেম তৈরি করেছি। এটি WebSocket মাধ্যমে ডেটা সংগ্রহ করে Highcharts চার্টে প্রদর্শন করে। WebSocket সার্ভারের মাধ্যমে ডেটা পাঠানো এবং গ্রহণ করার এই প্রক্রিয়া রিয়েল-টাইম ডেটা ভিজ্যুয়ালাইজেশনের জন্য কার্যকরী একটি সমাধান।